﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>gis</title>
		<script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: ;
			}
			
			#mapDiv {
				height: 100%;
				width: 100%;
			}
			
			input,
			p {
				margin-top: 10px;
				margin-left: 5px;
				font-size: 14px;
			}
		</style>
		<script>
			var map
			var zoom = 12;
			var pointList = [{
				name: "慎益大街与南门外大街交口",
				x: "117.187654",
				y: "39.139594"
			}, {
				name: "南大道与西马路交口",
				x: "117.178592",
				y: "39.144885"
			}, {
				name: "密云一支路与快速路交口",
				x: "117.131855",
				y: "39.165389"
			}, {
				name: "红星路东风地道",
				x: "117.248277",
				y: "39.123495"
			}, {
				name: "艺林路与珠江道交口",
				x: "117.289721",
				y: "39.070678"
			}, {
				name: "劳动道菜市场",
				x: "117.250817",
				y: "39.134081"
			}];

			function onLoad(x, y, name) {

				var bounds = map.getBounds();
				var sw = bounds.getSouthWest();
				var ne = bounds.getNorthEast();
				var lngSpan = Math.abs(sw.lng - ne.lng);
				var latSpan = Math.abs(ne.lat - sw.lat);
				var point = new T.LngLat(x, y);
				var marker = new T.Marker(point);
				var infoWin1 = new T.InfoWindow();
				var sContent = name;
				infoWin1.setContent(sContent);
				marker.addEventListener("click", function() {
					marker.openInfoWindow(infoWin1);
					console.log(infoWin1)
				});
				map.addOverLay(marker);

				label = new T.Label({
					text: name,
					position: marker.getLngLat(),
					offset: new T.Point(3, -30)
				});
				map.addOverLay(label);
				marker.addEventListener("drag", function(e) {
					label.setLngLat(marker.getLngLat());
				})
			}

			function test() {
				map = new T.Map("mapDiv");
				map.centerAndZoom(new T.LngLat(117.187654, 39.139594), zoom);
				for(var i = 0; i < pointList.length; i++) {
					onLoad(pointList[i].x, pointList[i].y, pointList[i].name)
				}
			}
		</script>
	</head>

	<body onLoad="test()">
		<div id="mapDiv"></div>
		<p></p>
	</body>

</html>